<template>
  <div class="dashboard-container">
    <div class="app-container">
      <page-tools>
        <template #after>
          <el-button size="small" type="primary">添加权限</el-button>
        </template>
      </page-tools>

      <el-table
        row-key="id"
        :data="list"
        border
        stripe
      >
        <el-table-column
          v-for="(col,index) in columns"
          :key="index"
          :prop="col.prop"
          :label="col.label"
          :align="col.align"
        >
          <template slot-scope="{row}">
            <el-tag
              v-if="col.prop === 'code'"
            >{{ row.[col.code] }}</el-tag>
            <span v-else>{{ row[col.prop] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{row}">
            <el-button type="text">添加</el-button>
            <el-button type="text">编辑</el-button>
            <el-button type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <addForm />
  </div>
</template>

<script>
import}
export default {
  name: 'Permission',
  components: {
    addForm
  },
  data() {
    return {
      // 表格数据
      list: [],
      // 列的数据
      columns: [
        { label: '名称', prop: 'name', align: 'center' },
        { label: '标识', prop: 'code', align: 'center' },
        { label: '描述', prop: 'description', align: 'center' }
      ]
    }
  }
}
</script>

<style>

</style>
